<template>
  <vxe-modal :key="dialogKey" title="查看项目预算" v-model="dialogVisible" width="60%" showFooter esc-closable show-zoom resize>
    <div style="height: 71vh; overflow-y: auto;">
      <el-card class="box-card" shadow="never" :body-style="{ padding: '10px',backgroundColor: '#bfcdda' }">
        <!-- 点击课题名称 项目的经费预算 -->
        <el-card class="box-card" shadow="hover" style="min-height: 25vh">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">项目申请经费</span>
          </div>
          <!-- 项目的经费预算上 -->
          <el-table height="15vh" :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                    :data="ziYffyTableData">
            <el-table-column label="序号" align="center" type="index" width="50"/>
            <el-table-column label="年份" align="center" prop="yffyYear" width="150"/>
            <el-table-column label="申请资助(万元)" align="center" prop="sqzz" width="150"/>
            <el-table-column label="自筹金额(万元)" align="center" prop="zcje" width="150"/>
            <el-table-column label="备注" align="center" prop="remark"/>
            <!-- 其他列配置 -->
          </el-table>
        </el-card>
        <br>
        <!-- 项目的经费预算下 -->
        <el-card class="box-card" shadow="hover" >
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">项目的研发费用预算表</span>
          </div>
          <el-table ref="ffyysTable" :summary-method="getSummariesFfyys" show-summary
                    height="32vh" :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                    :data="ziYffysTableData">
            <el-table-column label="序号" align="center" type="index" width="50"/>
            <el-table-column label-class-name="custom-header" show-overflow-tooltip label="项目" align="left" prop="xm"/>
            <el-table-column label="项目总预算(万元)" align="center" prop="xmZys" width="130"/>
            <el-table-column label="第一年度预算" align="center" prop="oneYs" width="100"/>
            <el-table-column label="第二年度预算" align="center" prop="towYs" width="100"/>
            <el-table-column label="第三年度预算" align="center" prop="threeYs" width="100"/>
            <el-table-column label="第四年度预算" align="center" prop="fourYs" width="100"/>
            <el-table-column label="第五年度预算" align="center" prop="fiveYs" width="100"/>
            <!-- 其他列配置 -->
          </el-table>
        </el-card>
      </el-card>
    </div>
    <div slot="footer" class="dialog-footer" style="display: flex; justify-content: center;">
      <el-button icon="el-icon-close" size="mini" @click="cancel">关 闭</el-button>
    </div>
  </vxe-modal>
</template>

<script>
import {selectLlglXmsbByyffyByXmsbId, selectLlglXmsbByyffysByXmsbId} from "@/api/xmgl/lxgl/xmsb/xmsb";

export default {
  name: "xmZe",
  data() {
    return {
      dialogVisible: false,
      getXmsbId: null,
      ziYffyTableData: [],
      ziYffysTableData: [],
      form: {
        xmze: null,
      },
      dialogKey: 0,
    }
  },
  methods: {
    handleOpen(row) {
      this.dialogVisible = true;
      this.dialogKey++
      this.getXmsbId = row.xmsbId;
      this.getXmZeData();
    },
    getXmZeData(){
      let xmsbId = this.getXmsbId;
      //查询项目的经费预算 上
      selectLlglXmsbByyffyByXmsbId(xmsbId).then(res => {
        //将项目的经费预算上子表信息赋值到ziYffyTableData
        this.ziYffyTableData = res.data.lxglXmsbYffyList;
      })
      //查询项目的经费预算 下
      selectLlglXmsbByyffysByXmsbId(xmsbId).then(res => {
        //将项目的经费预算下子表信息赋值到ziYffysTableData
        this.ziYffysTableData = res.data.lxglXmsbYffyysList;
        // 手动触发表格的重新计算汇总
        this.$nextTick(() => {
          this.$refs.ffyysTable.doLayout();
        });
      })
    },
    //对研发费用预算表下表进行汇总
    getSummariesFfyys(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '';
        } else {
          if (column.property === 'xm') {
            // 对于'xm'列，直接设置为"文字"
            sums[index] = '汇总（1+5+10+15+20+24+29+30+36）';
          } else if (['xmZys', 'oneYs', 'towYs', 'threeYs', 'fourYs', 'fiveYs'].includes(column.property)) {
            // 对于需要汇总的列（xmZys, oneYs, towYs, threeYs, fourYs, fiveYs）
            const targetRows = [1, 5, 10, 15, 20, 24, 29, 30, 36];
            let values = data
              .filter((_, rowIndex) => targetRows.includes(rowIndex + 1))
              .map(item => Number(item[column.property]));

            sums[index] = !values.every(value => isNaN(value))
              ? values.reduce((prev, curr) => prev + (isNaN(Number(curr)) ? 0 : Number(curr)), 0)
              + (column.property === 'xmZys' ? '' : '')
              : '';
            this.form.xmze = sums[2];
          } else {
            // 对于其他不需要特殊处理的列，可以留空、设置默认值或进行其他处理
            sums[index] = '';
          }
        }
      });
      return sums;
    },
    cancel() {
      this.dialogVisible = false;
    }
  },
}
</script>

<style scoped>
/* header 头部背景 */
/deep/ .el-card__header {
  padding: 3px 7px 3px;
  min-height: 10px;
  background-color: aliceblue;
}
</style>
